import React from 'react';
import { connect } from 'umi';
import { faArrowLeft, faArrowRight, faHome, faRedo, faEllipsisV,faCamera,faBug } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import AddressBar from './AddressBar'
import './ToolBar.css';

const CircleButton = ({ icon, color, onClick }) => {
    return (
        <div className="d-flex circle-button" onClick={onClick}>
            <FontAwesomeIcon className="circle-button-font" icon={icon} color={color}></FontAwesomeIcon>
        </div>
    )
}

const ToolBar = ({openDev,capture,navigate,reload}) => {
    return (
        <div className="d-flex align-items-center">
            <CircleButton icon={faArrowLeft} color={'gray'} onClick={e=>{navigate('goBack')}} />
            <CircleButton icon={faArrowRight} color={'gray'} onClick={e=>{navigate('goForward')}} />
            <CircleButton icon={faRedo} color={'gray'} onClick={reload}/>
            <CircleButton icon={faHome} color={'gray'} />
            <div className="flex-grow-1 address-bar-wrapper">
                <AddressBar />
            </div>
            <CircleButton icon={faCamera} color={'gray'} onClick={capture}/>
            <CircleButton icon={faBug} color={'gray'} onClick={openDev} />            
        </div>
    )
}

const mapStateToProps = ({addressBar})=>{
    return {
        ...addressBar
    }
}
const mapDispatchToProps = {
    openDev:()=>{
        return {
            type:'addressBar/openDev'
        }
    },
    capture:()=>{
        return {
            type:'addressBar/capture'
        }
    },
    reload:()=>{
        return {
            type:'addressBar/reload'
        }
    },
    navigate:(role)=>{
        return {
            type:'addressBar/navigate',
            payload:{
                role
            }
        }
    }
}
export default connect(mapStateToProps,mapDispatchToProps)(ToolBar);